<template>
	<view class="content">

		<view :class="imgShow?'canvas_ canvas_active':'canvas_'">
			<image :src="path" mode="widthFix" show-menu-by-longpress @load="load"></image>
			<view class="" v-if="path">
				长按分享
			</view>
		</view>
 		
		<view class="button-wrapper" v-if="path">
			<view class="save-btn" @tap="saveImage">保存海报</view>
			<view class="save-btn cancel-btn" @tap="handleCanvasCancel">取消</view>
		</view>


		<l-painter css="width:300rpx;height:680rpx;" custom-style="position: fixed; left: 200%" :after-delay="500"  isCanvasToTempFilePath
			@success="path = $event">
			<l-painter-view 
				css="color: #222a29;position: relative;width:300rpx;height:680rpx;background-image:url(https://wjlm.goldsu.cn/file/2901cb7d-1e3f-4b77-8e38-c0cf8a87bcda.png)">



				<l-painter-view css="margin:210rpx 0 0 30rpx">
					<l-painter-view>
						<l-painter-text text="我的战绩" css="padding-top: 20rpx;color:#ECAD23;font-weight: 700;font-size:14rpx" />
					</l-painter-view>
					<l-painter-view v-for="(item ,index) in activ_list">

						<l-painter-image src="../../../static/challenge.png"
							css="width:18rpx;height:18rpx;margin:8rpx 8rpx 0 0 ;" />
						<l-painter-text :text="item.title" css=" padding-top: 10rpx;color:#333;font-size: 12rpx;" />
						<l-painter-text :text="`${item.number}`"
							css=" padding: 10rpx 5rpx 0 10rpx;color:#333;font-size: 12rpx;" />
					</l-painter-view>
				</l-painter-view>


				<l-painter-view css="display:flex;position: absolute;bottom:100rpx;left:30rpx;">
					<l-painter-view css="flex:1">
						<l-painter-view>
							<l-painter-text text="我的勋章" css=" padding-top: 20rpx;color:#ECAD23;font-weight: 700;font-size:14rpx" />
						</l-painter-view>
						<l-painter-image v-if="bages_list.length"
							:src="bages_list[0].pic"
							css="width:100rpx;height:100rpx;" />
					</l-painter-view>
					<l-painter-view css="flex:1">
						<l-painter-view>
							<l-painter-text text="我的奖杯" css=" padding-top: 20rpx;color:#ECAD23;font-weight: 700;font-size:14rpx" />
						</l-painter-view>

						<l-painter-image
							src="https://wjlm.goldsu.cn/file/ee3f0e40-45e2-4d37-be8d-27d39c378d60.png"
							css="width:100rpx;height:100rpx;" />
					</l-painter-view>
				</l-painter-view>


				<l-painter-image
					src="https://wjlm.goldsu.cn/file/20221227151800.jpg"
					css="position: absolute;bottom:10rpx;right:20rpx;width:82rpx;height:82rpx;z-index:-1;" />

			</l-painter-view>
		</l-painter>
		<!-- <invite ref="invite" style="position: fixed;top: 0px;z-index: 999999;" :data="data" :code_url="codeImg"></invite> -->
		<gameLoading />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activ_list: [],
				bages_list: [],
				rank: 1,
				path: '',
				imgShow:false
			}
		},
		created() {
			this.$store.commit('switchGame', {
				code: true
			})
		},
		mounted() {
			let game_id = uni.getStorageSync("gameId")
			this.$myRuquest('home/game/game_record', {
				game_id
			}).then(res => {
				let activ_list = res.data.activ_list
				// let code=res.data.activ_det.type==1||res.data.activ_det.type==3
				activ_list.forEach(item=>{
					if(item.clues_num==activ_list[0].clues_num) item.champion=true
					if(item.type==1||item.type==3) {
						item.number=this.$util.timeFormat(item.number)
					}else{
						item.number+='分'
					}
				})
					this.activ_list = activ_list
				this.bages_list = res.data.bages_list.splice(0,8)
				this.rank = res.data.rank
			})
		},
		methods: {
			load() {
				this.imgShow=true
				this.$store.commit('switchGame', {
					code: false
				})
			},
			saveImage() {
				let _this = this
				uni.saveImageToPhotosAlbum({
					filePath: _this.path,
					success(res) {
						uni.hideLoading()
						uni.showToast({
							title: '图片保存成功，可以去分享啦~',
							duration: 2000,
							icon: 'none'
						})
						_this.handleCanvasCancel()
			
					},
					fail: function(err) {
						console.log(err)
						uni.showToast({
							title: '保存失败，稍后再试',
							duration: 2000,
							icon: 'none'
						})
						uni.hideLoading()
						if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg ===
							"saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
							"saveImageToPhotosAlbum:fail authorize no response") {
							// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
							wx.showModal({
								title: '提示',
								content: '需要您授权保存相册',
								showCancel: false,
								success: modalSuccess => {
									wx.openSetting({
										success(settingdata) {
											console.log("settingdata", settingdata)
											if (settingdata.authSetting[
													'scope.writePhotosAlbum']) {
												wx.showModal({
													title: '提示',
													content: '获取权限成功,再次点击图片即可保存',
													showCancel: false,
												})
											} else {
												wx.showModal({
													title: '提示',
													content: '获取权限失败，将无法保存到相册哦~',
													showCancel: false,
												})
											}
										},
										fail(failData) {
											console.log("failData", failData)
										},
										complete(finishData) {
											console.log("finishData", finishData)
										}
									})
								}
							})
						}
					}
				})
			
			},
			handleCanvasCancel(){
				uni.navigateBack({
					delta:arguments
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: rgba(0, 0, 0, .4);
		height: 100vh;

	}



	.canvas_ {
		width: 0;
		display: block;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 999;
		transform: translate(-50%, -50%);
		transition: all 1.5s;
		position: relative;
		image {
			width: 100%;
		}

		view {
			font-size: calc(26vmin / 7.5);
			color: #ffffff;
			position: absolute;
			bottom: calc(-40vmin / 7.5);
			text-align: center;
			width: 100%;
		}
	}
	.canvas_active{
		width: 70vw;
	}
	
	
	.button-wrapper {
		position: fixed;
		bottom: calc(60vmin / 7.5);
		z-index: 16;
		display: flex;
		width: 100%;
		height: calc(72vmin / 7.5);
		justify-content: space-around;
	}
	
	.save-btn {
		z-index: 16;
		width: 40%;
		height: 100%;
		font-size: calc(30vmin / 7.5);
		line-height: calc(72vmin / 7.5);
		color: #fff;
		text-align: center;
		background: $theme-color;
		border-radius: calc(45vmin / 7.5);
		border-radius: calc(36vmin / 7.5);
	}
	
	.cancel-btn {
		color: $theme-color;
		background: #fff;
	}

</style>
